<template>
  <div class="info">
    <div class="info-container">
      <div class="title">分布详情</div>
      <div class="left">起始时间</div>
      <div class="line"></div>
      <div class="right">
        <!-- <div class="item">
          <div class="time">11:30</div>
          <div class="content"></div>
        </div> -->
        <div class="item">
          <div class="time">{{ timeData }}</div>
          <div class="content">
            <div class="header">
              <img src="./assets/tubiao01.png" alt="" class="img" />
              <div class="text">{{ content[0] }}</div>
            </div>
            <div
              class="desc"
              v-for="(item, index) in content.slice(1)"
              :key="index"
            >
              {{ item.trim().replace(/\*\*/g, "") }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="back" @click="goHome"></div>
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { getSubjectTime } from "@/api/api.js";
const route = useRoute();
const router = useRouter();
const type = ref(route.query.type);
const chuang = ref(route.query.chuang);
const yuan = ref(route.query.yuan);
const goHome = () => {
  router.push({
    path: "/home",
    query: {
      type: type.value,
      chuang: chuang.value,
      yuan: yuan.value,
    },
  });
};
const content = ref([
  "横沙大停电",
  "横沙因异常导致全岛停电，柴发应急启动。",
  "故障点一：",
  "团结站：团新3V303零流一段保护动作，开关跳闸，重合不成功。长兴站：长新3V311零流一段保护动作，开关跳闸，重合不成功。",
  "区域：",
  "新民站、红星站、横沙柴发",
  "涉及班组：",
  "变电运维一班",
]);
const type2 = [
  "横沙大停电",
  "横沙因异常导致全岛停电，柴发应急启动。",
  "故障点一：",
  "团结站：团新3V303零流一段保护动作，开关跳闸，重合不成功。长兴站：长新3V311零流一段保护动作，开关跳闸，重合不成功。",
  "区域：",
  "新民站、红星站、横沙柴发",
  "涉及班组：",
  "变电运维一班",
];
const type3 = [
  "重要用户失电：",
  "演练主题：重要用户内部故障导致全站失电应急处置",
  "参与单位：调控中心、大客户班、带电班（发电车）、重要用户（青草沙水库）",
  "【场景1：故障发生与信息报送】",
  "场景描述：",
  "- 智慧保电系统监测到10kV进线柜局部放电超标（后台显示放电量>50pC），触发系统告警。",
  "- 30秒后，进线柜绝缘击穿，用户变电站一路失电，柴油发电机启动，但无法保障所有泵闸用电，关键负载（输水泵闸）仅能支撑30分钟",
  "演练动作：",
  "1. 用户值班电工：",
  '- 查看保电系统告警记录："09:00:23，10kV青草沙甲进线柜A相局部放电告警，09:00:48，过流保护动作跳闸。" ',
  '- 立即电话上报高压监察："我站保电系统监测到进线柜放电故障，现青草沙甲停电，目前处于泵闸输送水关键期，自备电源仅能维持30分钟，请求支援！" ',
  "2. 高压监察： ",
  "- 调取该用户实时负荷曲线（大屏幕显示停电前负荷2000kW突降至0），确认故障范围。  ",
  "- 启动三级应急响应，同步通知：",
  "- **应急发电车**（10kV中压发电车） ",
  '- 向上级报备："青草沙水库因内部设备故障停电，已启动保电预案。" ',
  "【场景2：高压监察现场诊断】",
  "关键操作:",
  "1. **故障定位**：  ",
  "- 使用超声波局放检测仪扫描进线柜，定位A相电缆终端放电点（模拟数值：65dB）。",
  "- 红外测温显示故障点温度达120℃（正常相为45℃）。  ",
  "2. **隔离决策**：",
  '- 高压监察班长："故障原因为电缆头制作工艺缺陷，需立即隔离10kV I段母线，建议优先通过发电车接入保障输水泵闸负荷。"',
  '- 高压监察："汇报调度，二级重要用户青草沙甲进线故障需进行抢修，申请上级线路配合停电。 " ',
  "3. **用户配合**：  ",
  '- 电工断开进线开关并上锁，悬挂"故障待修"标识牌。  ',
  "**【场景3：发电车接入】** ",
  "**关键操作**：",
  " 使用10kV发电车临时接带 I段母线（需核相、保护定值调整模拟）。",
  "**关键台词**： ",
  '- 带电班："发电车已并网成功，输出电压10.2kV，频率50.02Hz，用户 I段母线全部负荷恢复！"  ',
  "**【场景4：故障修复与复盘】**",
  "**核心流程**： ",
  "1. 用户委托有资质单位更换故障电缆头（演练模拟：试验合格报告出具）。 ",
  '2. 高压监察验收："局放量<10pC，耐压试验通过，可以复电。"  ',
  "3.发电车",
  "4. 上级线路合闸送电，恢复主供电源。",
];
const type4 = [
  "居民失电：",
  "模拟场景：大跨越双回路发生外破，横沙岛全停。用户报修电话一个接一个，其中有一户居民报家里老人用呼吸机，长停电时间将有生命危险。供电服务二班收到承讯班信息后，立即组织抢修驻点人员，紧急为该户居民家提供移动电源，确保呼吸机在停电期间正常用电。在线路恢复供电后，撤回移动电源。",
];
const type5 = [
  "施工撤离：",
  "重点任务：施工现场人员撤离、孔洞封堵、围栏加固等安全措施布置",
  "主要步骤：",
  "1、办公室发出应急响应指令。",
  "2、建设部向施工现场发出撤离指令。",
  "3、施工现场人员有序撤离、对现场做好相关安全防护措施。",
  "4、施工单位现场负责人汇报撤离情况。",
  "区域：",
  "施工现场",
  "涉及班组：",
  "建设部项管组、施工单位、施工班组",
];
const type6 = [
  "应急排涝",
  "重点任务：厂区地下车库内涝，启用应急排涝泵进行应急处理。",
  "主要步骤：",
  "1、应急指挥中心发出排涝泵准备指令。",
  "2、安监部向应急基干队伍发出应急处置指令。",
  "3、应急基干队伍集结，前往排涝泵存放点，检查应急排涝泵，外体外观坏、连接部件、电气线路，以及观察试运行状态。",
  "4、应急基干队伍专用车辆将排涝泵运送至预定排涝区域，固定排涝泵位置，连接水带，启动设备。",
  "5.指挥中心下达抽水指令。",
  "6.队伍成员启动排涝泵，观察排水流量和压力，对排涝区域周边进行巡视，查看是否有漏水、积水倒灌等情况。",
  "7.队伍成员定时向指挥中心汇报排涝进展，直至积水排净。",
  "8.队伍成员定向指挥中心汇报排涝结束，指挥中心下达演练结束指令。",
  "区域：",
  "厂区地下车库",
  "涉及班组：",
  "安监部",
  "应急基干队伍",
];
const timeData = ref();
const getSubjectTimeFn = async (type) => {
  const data = await getSubjectTime(type);
  timeData.value = data.data;
  console.log(data, "分布数据");
};
onMounted(() => {
  if (route.query.type == 2) {
    content.value = type2;
  } else if (route.query.type == 3) {
    content.value = type3;
  } else if (route.query.type == 4) {
    content.value = type4;
  } else if (route.query.type == 5) {
    content.value = type5;
  } else if (route.query.type == 6) {
    content.value = type6;
  }
  getSubjectTimeFn(route.query.type);
});
</script>
<style lang="less" scoped>
* {
  box-sizing: border-box;
}
.info {
  width: 1920px;
  height: 1080px;
  position: relative;
  .info-container {
    position: absolute;
    top: 46%;
    left: 50.5%;
    transform: translate(-50%, -50%);
    width: 1715px;
    height: 680px;
    background: url(./assets/beijing03.png) no-repeat top center / 100%;
    padding: 90px 0 20px 70px;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    .left {
      color: #fff;
      margin-right: 25px;
      margin-top: 5px;
      white-space: nowrap;
    }
    .line {
      width: 1px;
      height: 100%;
      background: #0bb7ff;
    }
    .right {
      flex: 1;
      color: #fff;
      height: 100%;
      overflow-y: scroll;
      overflow-x: scroll;
      position: relative;
      left: -10px;
      padding-right: 10px;
      .item {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        margin-bottom: 30px;
        &:first-child {
          margin-bottom: 10px;
          //   .time {
          //     margin-top: 0;
          //   }
        }
        .time {
          padding: 5px 10px;
          border-radius: 5px;
          background-color: rgba(11, 183, 255, 0.6);
          margin-right: 10px;
          margin-top: 8px;
        }
        .content {
          .header {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            margin-bottom: 5px;
          }
          .text {
            font-size: 26px;
            font-weight: bold;
            font-family: DINPro;
            background: linear-gradient(
              180deg,
              #ffffff 0%,
              #ffffff 22%,
              #0bb7ff 82%,
              #0bb7ff 100%
            );
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            text-fill-color: transparent;
          }
          .desc {
            // color: rgba(255, 255, 255, 0.6);
            color: #9fbcdf;
            font-size: 20px;
            line-height: 30px;
            min-height: 30px;
          }
        }
        .img {
          width: 50px;
          height: 50px;
          margin-right: 5px;
        }
      }
      /* 滚动条整体部分 */
      &::-webkit-scrollbar {
        height: 4px;
        width: 4px;
      }
      /* 滚动条里面的滑块 */
      &::-webkit-scrollbar-thumb {
        background-color: rgba(234, 254, 255, 1);
        border-radius: 20px;
      }
    }
    .title {
      position: absolute;
      left: 35px;
      top: 14px;
      color: #fff;
      font-size: 32px;
    }
  }
  .back {
    position: absolute;
    left: 50%;
    bottom: 120px;
    transform: translateX(-50%);
    width: 210px;
    height: 75px;
    cursor: pointer;
    background: url(./assets/anniu02.png) no-repeat top center / 100%;
  }
}
</style>
